<template>
  <div class="widget-config">
    <el-form label-position="top" size="small">
      <el-form-item label="标签">
        <el-input v-model="data.label" />
      </el-form-item>

      <el-form-item label="字段标识">
        <el-input v-model="data.model" />
      </el-form-item>

      <el-form-item label="默认值" v-if="showDefaultValue">
        <el-input v-model="data.options.defaultValue" v-if="['input', 'textarea'].includes(data.type)" />
        <el-input-number v-model="data.options.defaultValue" v-else-if="['number', 'rate'].includes(data.type)" />
        <el-switch v-model="data.options.defaultValue" v-else-if="data.type === 'switch'" />
        <el-select v-model="data.options.defaultValue" v-else-if="data.type === 'select' && !data.options.multiple">
          <el-option v-for="item in data.options.options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="data.options.defaultValue" multiple v-else-if="data.type === 'select' && data.options.multiple">
          <el-option v-for="item in data.options.options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="占位内容" v-if="showPlaceholder">
        <el-input v-model="data.options.placeholder" />
      </el-form-item>

      <el-form-item label="宽度" v-if="showWidth">
        <el-input v-model="data.options.width" />
      </el-form-item>

      <el-form-item label="前缀" v-if="data.type === 'input'">
        <el-input v-model="data.options.prepend" />
      </el-form-item>

      <el-form-item label="后缀" v-if="data.type === 'input'">
        <el-input v-model="data.options.append" />
      </el-form-item>

      <el-form-item label="最大长度" v-if="['input', 'textarea'].includes(data.type)">
        <el-input-number v-model="data.options.maxLength" :min="0" />
      </el-form-item>

      <el-form-item label="行数" v-if="data.type === 'textarea'">
        <el-input-number v-model="data.options.rows" :min="2" />
      </el-form-item>

      <el-form-item label="最小值" v-if="['number', 'slider'].includes(data.type)">
        <el-input-number v-model="data.options.min" />
      </el-form-item>

      <el-form-item label="最大值" v-if="['number', 'slider', 'rate'].includes(data.type)">
        <el-input-number v-model="data.options.max" />
      </el-form-item>

      <el-form-item label="步长" v-if="['number', 'slider'].includes(data.type)">
        <el-input-number v-model="data.options.step" />
      </el-form-item>

      <el-form-item label="格式" v-if="['date', 'time'].includes(data.type)">
        <el-input v-model="data.options.format" />
      </el-form-item>

      <el-form-item label="上传地址" v-if="data.type === 'upload'">
        <el-input v-model="data.options.action" />
      </el-form-item>

      <el-form-item label="最大上传数" v-if="data.type === 'upload'">
        <el-input-number v-model="data.options.limit" :min="1" />
      </el-form-item>

      <el-form-item label="文件类型" v-if="data.type === 'upload'">
        <el-input v-model="data.options.accept" placeholder=".jpg,.png" />
      </el-form-item>

      <el-form-item label="栅格间隔" v-if="data.type === 'grid'">
        <el-input-number v-model="data.options.gutter" :min="0" />
      </el-form-item>

      <el-form-item v-if="data.type === 'grid'">
        <template #label>
          <span>栅格列</span>
          <el-button type="primary" size="small" @click="handleAddColumn" style="margin-left: 10px;">添加</el-button>
        </template>
        <div v-for="(col, index) in data.columns" :key="index" style="margin-bottom: 10px;">
          <el-input-number v-model="col.span" :min="1" :max="24" style="width: 120px;" />
          <el-button type="danger" size="small" @click="handleDeleteColumn(index)" style="margin-left: 10px;">删除</el-button>
        </div>
      </el-form-item>

      <el-form-item v-if="showOptions">
        <template #label>
          <span>选项</span>
          <el-button type="primary" size="small" @click="handleAddOption" style="margin-left: 10px;">添加</el-button>
        </template>
        <div v-for="(option, index) in data.options.options" :key="index" style="margin-bottom: 10px;">
          <el-input v-model="option.label" placeholder="标签" style="width: 100px;" />
          <el-input v-model="option.value" placeholder="值" style="width: 100px; margin-left: 5px;" />
          <el-button type="danger" size="small" @click="handleDeleteOption(index)" style="margin-left: 5px;">删除</el-button>
        </div>
      </el-form-item>

      <el-form-item v-if="showClearable">
        <el-checkbox v-model="data.options.clearable">可清空</el-checkbox>
      </el-form-item>

      <el-form-item v-if="showMultiple">
        <el-checkbox v-model="data.options.multiple">多选</el-checkbox>
      </el-form-item>

      <el-form-item v-if="data.type === 'slider'">
        <el-checkbox v-model="data.options.showStops">显示间断点</el-checkbox>
      </el-form-item>

      <el-form-item v-if="data.type === 'rate'">
        <el-checkbox v-model="data.options.allowHalf">允许半选</el-checkbox>
      </el-form-item>

      <el-form-item v-if="data.type === 'color'">
        <el-checkbox v-model="data.options.showAlpha">支持透明度</el-checkbox>
      </el-form-item>

      <el-form-item>
        <el-checkbox v-model="data.options.disabled">禁用</el-checkbox>
      </el-form-item>

      <el-form-item v-if="data.type !== 'grid'">
        <el-checkbox v-model="data.options.required">必填</el-checkbox>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

const showDefaultValue = computed(() => {
  return !['upload', 'grid'].includes(props.data.type)
})

const showPlaceholder = computed(() => {
  return ['input', 'textarea', 'select', 'date', 'time'].includes(props.data.type)
})

const showWidth = computed(() => {
  return ['input', 'textarea', 'number', 'select', 'slider', 'date', 'time'].includes(props.data.type)
})

const showClearable = computed(() => {
  return ['input', 'select', 'date', 'time'].includes(props.data.type)
})

const showMultiple = computed(() => {
  return ['select', 'upload'].includes(props.data.type)
})

const showOptions = computed(() => {
  return ['radio', 'checkbox', 'select'].includes(props.data.type)
})

const handleAddOption = () => {
  if (!props.data.options.options) {
    props.data.options.options = []
  }
  props.data.options.options.push({
    label: `选项${props.data.options.options.length + 1}`,
    value: `选项${props.data.options.options.length + 1}`
  })
}

const handleDeleteOption = (index) => {
  props.data.options.options.splice(index, 1)
}

const handleAddColumn = () => {
  if (!props.data.columns) {
    props.data.columns = []
  }
  props.data.columns.push({ span: 12, list: [] })
}

const handleDeleteColumn = (index) => {
  props.data.columns.splice(index, 1)
}
</script>

<style lang="scss" scoped>
.widget-config {
  padding: 10px;
}
</style>